<template>
	<view class="i-user-info" :style="[viewStyle]">
		<view :class="[styleClass]" :style="[boxStyle]">
			<view class="body" :class="[notLoginClass]" :style="[bodyStyle]">
				<!-- 图标 -->
				<view class="icon-box e-flex e-flex-1  c-white" :style="[iconStyle]" v-if="option.layoutType === 3">
					<view class="e-flex  e-m-r-10" v-if="settingIsShow1"
						@tap.stop="$goTo('/pages/public/setting/index')">
						<text class="iconfont icon-shezhi e-font-32"></text>
						<text class="e-font-24 e-p-l-10">{{ $t('layout.设置') }}</text>
					</view>
					<view class="e-flex  e-rela xiaoxi-2" v-if="settingIsShow2"
						@tap.stop="$goTo('/pages/public/msg/index')">
						<text class="iconfont icon-xiaoxi e-font-32"></text>
						<text class="e-font-24 e-p-l-10">{{ $t('layout.消息') }}</text>
						<e-badge :value="unreadCount" :absolute="true" :offset="['-50%','-50%']"></e-badge>
					</view>
				</view>
				<!-- 用户信息 -->
				<view class="user-box  " :style="[userBoxStyle]">
					<view class="e-flex" @tap.stop="$goTo('/pages/public/setting/index')">
						<view class="user-box__avatar">
							<e-avatar :defaultUrl="$staticPath('default-headerImg.png')"
								@click="$goTo('/pages/public/setting/index')"
								:src="$fullLink(isLogin ? userInfo.photo : '')" size="104rpx"></e-avatar>
						</view>

						<view class="text-box"
							:class="[option.layoutType === 4 ? 'text-center e-m-t-20' : 'text-left']">
							<template v-if="isLogin">
								<view>
									<view :style="[userNameStyle]" :class="[option.layoutType === 4 ? '' : 'c-white']"
										class="e-font-32 fw-500 e-m-b-6">
										{{ userInfo.nickname || '' }}
									</view>
									<view :class="[option.layoutType === 4 ? 'e-flex-xy-center' : 'e-flex']">
										<image class="levelIcon e-m-r-10" :class="{'levelIcon-1': levelImgType}" mode="heightFix"
											:src="$fullLink(userInfo.levelIcon)">
										</image>
										<text class="c-white e-font-28"
											v-if="option.showUserLevelName">{{userInfo.levelName}}</text>
									</view>
									<view class="chain-level-name e-flex-xy-center c-white e-m-t-20" v-if="chainLevelNameIsShow&&userInfo.chainLevelName">
										<text  class="e-font-24">{{userInfo.chainLevelName}}</text>
									</view>
									<view class="e-m-t-10" v-if="userInfo.svip">
										<image class="levelIcon-1 e-m-r-10" mode="heightFix"
											:src="$staticPath('svip.png')"></image>
									</view>
									<view class="chain-level-name e-flex-xy-center c-white e-m-t-20" style="background-color: red" v-if="userInfo.agentAddress">
										<text  class="e-font-24">{{userInfo.agentAddress}}</text>
									</view>
									<view class="chain-level-name e-flex-xy-center c-white e-m-t-20" @tap.stop="jumpBindRecommender" v-if="parentPhoneIsShow" >
										<text class="e-font-24">{{$t('user.推广人')}}{{ $t('common.:') }}{{userInfo.parentPhone||'-'}}</text>
										<image src="/static/layout/basics/arrow.png" class="img-28 e-m-l-6">
										</image>
									</view>
								</view>
							</template>
							<view :style="[userNameStyle]" :class="[option.layoutType === 4 ? '' : 'c-white']"
								class=" e-font-32 fw-500" v-else>
								{{ $t('layout.未登录') }}
							</view>
						</view>
					</view>
					<!-- 图标 -->
					<view class="icon-box e-flex e-flex-end e-flex-1  c-white" :style="[iconStyle]"
						v-if="option.layoutType === 2">
						<view class="e-flex e-m-r-10" v-if="settingIsShow1">
							<text class="iconfont icon-shezhi e-font-32"
								@tap.stop="$goTo('/pages/public/setting/index')"></text>
							<text class="e-font-24 e-p-l-10">{{ $t('layout.设置') }}</text>
						</view>
						<view class="e-flex e-rela xiaoxi-2" v-if="settingIsShow2">
							<text class="iconfont icon-xiaoxi e-font-32"
								@tap.stop="$goTo('/pages/public/msg/index')"></text>
							<text class="e-font-24 e-p-l-10">{{ $t('layout.消息') }}</text>
							<e-badge :value="unreadCount" :absolute="true" :offset="['-50%','-50%']"></e-badge>
						</view>
					</view>
					<!-- 账户 -->
					<view class="account-box " :style="[accountBoxStyle]"
						v-if="option.layoutType === 3 && option.showAccount !== 0&& isLogin && accountList.length">
						<swiper class="account-box__swiper" @change="handleChange">
							<block v-for="(item, index) in accountList" :key="index">
								<swiper-item class="e-flex">
									<view class=" text-center"
										:class="[`e-flex-${accountList[0]?.length}`, isSingleAccount ? 'account-box__one' : 'account-box__item']"
										v-for="items in item" :key="items.id"
										@tap.stop="jumpAccount(items.isDefault, items.strategy,items.frozenMoney)">
										<template v-if="isSingleAccount">
											<view class="e-font-24" :style="[accountNameStyle]">{{ items.name }}</view>
											<view class="e-flex">
												<text class=" e-font-32 fw-600"
													:style="[accountTextStyle]">{{ items.moneyAll }}</text>
												<image src="/static/layout/basics/arrow.png" class="img-20 e-m-l-6">
												</image>
											</view>
										</template>
										<template v-else>
											<view class="e-font-32 fw-600" :style="[accountTextStyle]">
												{{ items.moneyAll }}
											</view>
											<view class="e-font-24" :style="[accountNameStyle]">{{ items.name }}</view>
										</template>
									</view>
								</swiper-item>
							</block>
						</swiper>

						<view class="account-box__indicators e-flex-xy-center" v-show="accountList.length > 1">
							<view :class="{ 'account-box__indicators--active': accountCurrent === index }"
								v-for="(item, index) in accountList" :key="index"></view>
						</view>
					</view>
				</view>
				<!-- 图标 -->
				<view class="icon-box e-flex e-flex-end e-p-x-20" :style="[iconStyle]"
					v-if="[1, 4].includes(option.layoutType)">
					<text class="iconfont icon-shezhi e-font-32 e-m-r-20" v-if="settingIsShow1"
						@tap.stop="$goTo('/pages/public/setting/index')"></text>
					<view class="iconfont icon-xiaoxi e-font-32 e-rela xiaoxi-1" style="width: 17px;height: 17px;"
						v-if="settingIsShow2" @tap.stop="$goTo('/pages/public/msg/index')"> <e-badge
							:value="unreadCount" :absolute="true" :offset="['-50%','-50%']"></e-badge></view>
					<e-badge :value="unreadCount" :absolute="true" shape="horn" max="99"></e-badge>
				</view>

				<!-- 账户 -->
				<view class="account-box " :style="[accountBoxStyle]"
					v-if="option.layoutType !== 3 && option.showAccount !== 0 && isLogin && accountList.length">
					<swiper class="account-box__swiper" @change="handleChange">
						<block v-for="(item, index) in accountList" :key="index">
							<swiper-item class="e-flex">
								<view class="text-center "
									:class="[`e-flex-${accountList[0]?.length}`, isSingleAccount ? 'account-box__one' : 'account-box__item']"
									v-for="items in item" :key="items.id"
									@tap.stop="jumpAccount(items.isDefault, items.strategy,items.frozenMoney)">
									<template v-if="isSingleAccount">
										<view class="e-font-24" :style="[accountNameStyle]">{{ items.name }}</view>
										<view class="e-flex">
											<text class=" e-font-32 fw-600"
												:style="[accountTextStyle]">{{ items.moneyAll }}</text>
											<image src="/static/layout/basics/arrow.png" class="img-20 e-m-l-6"></image>
										</view>
									</template>
									<template v-else>
										<view class="e-font-32 fw-600" :style="[accountTextStyle]">{{ items.moneyAll }}
										</view>
										<view class="e-font-24" :style="[accountNameStyle]">{{ items.name }}</view>
									</template>
								</view>
							</swiper-item>
						</block>
					</swiper>

					<view class="account-box__indicators e-flex-xy-center" v-show="accountList.length > 1">
						<view :class="{ 'account-box__indicators--active': accountCurrent === index }"
							v-for="(item, index) in accountList" :key="index"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { CUSTOM_CURRENCY_PAGE, CUSTOM_CURRENCY_PAGE_PATH, CUSTOM_CURRENCY_LIST } from '@/env'
	import { ref, computed, watch } from 'vue'
	import { px2rpx } from './utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { AccountItem } from '@/common/request/api'
	import {getCustomerContractFig} from '@/common/request/api'
	import { useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import { getAppImageInfo } from '@/common/utils'


	const props = withDefaults(defineProps<{
		option : {
			layoutType : 1 | 2 | 3 | 4,
			isDefaultStyle : true,
			backgroundColor : '',
			cardBackgroundType : 0,
			cardBackgroundColor : string
			shadowColor : string
			cardBackgroundImage : '',
			iconColor : string
			// 自定义风格为3时的外部卡片背景类型
			// 0 背景色
			// 1 背景图
			outsideCardBackgroundType : 0,
			// 自定义风格为3的外部卡片背景色
			outsideCardBackgroundColor : string
			// 自定义风格为3的外部卡片背景图片地址
			outsideCardBackgroundImage : string
			// 自定义风格为3时的内部卡片背景类型
			// 0 背景色
			// 1 背景图
			insideCardBackgroundType : 0,
			// 自定义风格为3的内部卡片背景色
			insideCardBackgroundColor : string
			// 自定义风格为3的内部卡片背景图片地址
			insideCardBackgroundImage : string
			// 自定义用户昵称字体颜色
			userNameColor : string
			showContent : number[],
			// 账户设置项
			// 0 隐藏账户
			// 1 显示部分账户
			// 2 显示全部账户
			showAccount : 0 | 1 | 2,
			// 账户列表，showAccount为1时有效
			accountList : AccountItem[],
			// 账户背景类型
			// 0 背景色
			// 1 背景图
			accountBackgroundType : 0 | 1,
			// 账户背景色
			accountBackgroundColor : string
			// 账户背景图片地址
			accountBackgroundImage : string
			// 账户名称字体颜色
			accountNameColor : string
			// 账户余额字体颜色
			accountTextColor : string
			// 账户容器左右边距
			accountPaddingX : number
			// 账户容器上圆角
			accountRadiusTop : number
			// 账户容器下圆角
			accountRadiusBottom : number
			//边距
			paddingTop : number
			paddingBottom : number
			//圆角
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			layoutType: 1,
			isDefaultStyle: true,
			backgroundColor: '',
			cardBackgroundType: 0,
			cardBackgroundColor: 'rgba(255, 255, 255, 1)',
			shadowColor: 'rgba(255, 255, 255, 1)',
			cardBackgroundImage: '',
			iconColor: 'rgba(255, 255, 255, 1)',
			outsideCardBackgroundType: 0,
			outsideCardBackgroundColor: 'rgba(255, 255, 255, 1)',
			outsideCardBackgroundImage: '',
			insideCardBackgroundType: 0,
			insideCardBackgroundColor: 'rgba(255, 255, 255, 1)',
			insideCardBackgroundImage: '',
			userNameColor: 'rgba(255, 255, 255, 1)',
			showContent: [1, 2, 3, 4],
			showAccount: 1,
			accountList: [],
			accountBackgroundType: 1,
			accountBackgroundColor: 'rgba(51, 51, 51, 1)',
			accountBackgroundImage: '',
			accountNameColor: 'rgba(255, 255, 255, 1)',
			accountTextColor: 'rgba(255, 255, 255, 1)',
			accountPaddingX: 0,
			accountRadiusTop: 0,
			accountRadiusBottom: 0,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0
		})
	})

	const ctx = useCurrentInstance()
	const userStore = useUser()
	const { userInfo, isLogin, accountList: userAccountList, unreadCount } = storeToRefs(userStore)

	const levelImgType = ref(false)
	
	const jumpBindRecommender = () => {
		if(!userInfo.value.parentPhone){
			ctx.$goTo('/pages/public/account/bindRecommender')
		}
	}

	watch(() => userInfo.value.levelIcon, (val) => {
		if (val) {
			getAppImageInfo(ctx.$fullLink(val)).then((res) => {
				if (res.width - res.height > 20) {
					levelImgType.value = true
				} else {
					levelImgType.value = false
				}
			})
		}
	}, {
		immediate: true,
		deep: true
	})


	const viewStyle = computed(() => {

		if (props.option.isDefaultStyle) {
			return {
				padding: `${props.option.paddingTop}px ${props.option.paddingX}px ${props.option.paddingBottom}px ${props.option.paddingX}px`
			}
		} else {
			return {
				backgroundColor: props.option.backgroundColor,
				padding: `${props.option.paddingTop}px ${props.option.paddingX}px ${props.option.paddingBottom}px ${props.option.paddingX}px`
			}
		}

	})
	const styleClass = computed(() => {
		return `style${props.option.layoutType}  ` + (props.option.isDefaultStyle ? `style-bg${props.option.layoutType}` : '')
	})
	const notLoginClass = () => {
		return isLogin.value ? '' : `not-login-style${props.option.layoutType}`
	}
	const boxStyle = computed(() => {

		let data = {
			'--shadowColor': props.option.shadowColor,
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(
				props.option.radiusBottom
			)}`
		}
		if (props.option.isDefaultStyle) {
			return data
		} else {
			return { boxShadow: '0 0 20rpx 0 var(--shadowColor)', overflow: 'hidden', ...data }
		}

	})
	const bodyStyle = computed(() => {

		if (props.option.isDefaultStyle) {
			return {}
		} else {
			if (props.option.layoutType === 3) {
				return {
					background: props.option.outsideCardBackgroundType
						? `url(${ctx.$fullLink(props.option.outsideCardBackgroundImage)})`
						: props.option.outsideCardBackgroundColor
				}
			} else {
				return { background: props.option.cardBackgroundType ? `url(${ctx.$fullLink(props.option.cardBackgroundImage)})` : props.option.cardBackgroundColor }
			}
		}

	})
	const userBoxStyle = computed(() => {
		if (props.option.isDefaultStyle || props.option.layoutType !== 3) {
			return {}
		} else {
			return {
				background: props.option.insideCardBackgroundType ? `url(${ctx.$fullLink(props.option.insideCardBackgroundImage)})` : props.option.insideCardBackgroundColor,
				backgroundSize: "100% 100%"
			}
		}
	})

	const userNameStyle = computed(() => {
		if (props.option.isDefaultStyle) {
			return {}
		} else {
			return { color: props.option.userNameColor }
		}

	})

	const settingIsShow1 = computed(() => {
		return props.option.showContent ? props.option.showContent.includes(4) : false
	})
	const settingIsShow2 = computed(() => {
		return props.option.showContent ? props.option.showContent.includes(3) : false
	})
	const chainLevelNameIsShow = computed(() => {
		return props.option.showContent ? props.option.showContent.includes(5) : false
	})
	const parentPhoneIsShow = computed(() => {
		return props.option.showContent ? props.option.showContent.includes(6) : false
	})
	

	const iconStyle = computed(() => {
		if (props.option.isDefaultStyle) {
			return {}
		} else {
			return { color: props.option.iconColor }
		}
	})

	const accountBoxStyle = computed(() => {

		return {
			background: props.option.accountBackgroundType ? `url(${ctx.$fullLink(props.option.accountBackgroundImage)})` : props.option.accountBackgroundColor,
			borderRadius: `${px2rpx(props.option.accountRadiusTop)} ${px2rpx(props.option.accountRadiusTop)}  ${px2rpx(
				props.option.accountRadiusBottom
			)} ${px2rpx(props.option.accountRadiusBottom)}`,
			margin: `0 ${px2rpx(props.option.accountPaddingX)} 0 ${px2rpx(props.option.accountPaddingX)}`
		}

	})

	const accountList = computed(() => {
		if (!isLogin.value) return []
		let showAccount = props.option.showAccount
		let list : Array<AccountItem[]> = []
		switch (showAccount) {
			case 0:
				return list.filter(item => item.moneyAll)
			case 1:
				let accountList = props.option?.accountList || []
				if (accountList.length > 4) {
					let arr : AccountItem[] = []
					accountList.forEach(item => {
						let data = userAccountList.value.find(items => items.strategy === item.strategy)
						if (data) {
							arr.push(data)
						}
						if (arr.length === 4) {
							list.push(arr)
							arr = []
						}
					})
					if (arr.length) {
						list.push(arr)
					}
				} else {
					let arr : AccountItem[] = []
					accountList.forEach(item => {
						let data = userAccountList.value.find(items => items.strategy === item.strategy)
						if (data) {
							arr.push(data)
						}
					})
					list.push(arr)
				}
				return list.filter(item => item.moneyAll)
			case 2:
				let arr : AccountItem[] = []
				userAccountList.value.forEach(item => {
					if (item.moneyAll) {
						arr.push(item)
						if (arr.length === 4) {
							list.push(arr)
							arr = []
						}
					}
				})
				if (arr.length) {
					list.push(arr)
				}
				return list
			default:
				return list
		}
	})

	const isSingleAccount = computed(() => {
		return accountList.value.length === 1 && accountList.value[0].length === 1
	})
	const accountNameStyle = computed(() => {
		return { color: props.option.accountNameColor }
	})
	const accountTextStyle = computed(() => {
		return { color: props.option.accountTextColor }
	})



	const accountCurrent = ref(0)
	const handleChange = (e : { detail : { current : number } }) => {
		accountCurrent.value = e.detail.current
	}

	const jumpAccount = async (type : 'Y' | 'N', id : string,moneyAll:number) => {
		const config = await getCustomerContractFig({strategy:id})
		if (CUSTOM_CURRENCY_PAGE) {
			if (CUSTOM_CURRENCY_LIST.length > 0) {
				// 在指定的特定的账户中，则跳转自定义账户详情页面
				const customCurrencyInfo = CUSTOM_CURRENCY_LIST.find(item => item.strategy === id)
				if (customCurrencyInfo) {
					ctx.$goTo(customCurrencyInfo.path, { id })
				} else {
					// 没有则跳转原本的页面
					// 2025/2/22 判断是否存在通证信息
					if(config.data) {
						ctx.$goTo('/pages/digitIntegral/index', { id,moneyAll })
					} else {
						ctx.$goTo('/pages/user/wallet/currency', { id })
					}
				}
			} else {
				ctx.$goTo(CUSTOM_CURRENCY_PAGE_PATH, { id })
			}
		} else {
			if (type === 'Y') {
				ctx.$goTo('/pages/user/wallet/index')
			} else {
				if(config.data) {
					ctx.$goTo('/pages/digitIntegral/index', { id,moneyAll })
				} else {
					ctx.$goTo('/pages/user/wallet/currency', { id })
				}
			}
		}

	}
	if(isLogin.value){
		userStore.getUserInfo()
	}
	
</script>

<style lang="scss" scoped>
	.chain-level-name {
		border-radius: 100rpx;
		padding: 6rpx 20rpx;
		background-color: rgba(255, 255, 255, 0.5);
		// display: inline-block;
	}

	.levelIcon {
		height: 60rpx;
	}

	.levelIcon-1 {
		height: 40rpx;
	}

	.body {
		background-size: 100% 100% !important;
		min-height: 332rpx;

		.header-img {
			width: 104rpx;
			height: 104rpx;
		}

		.account-box {
			background-size: 100% 100% !important;

			&__swiper {
				height: 100rpx;
			}

			&__item {
				padding-top: 16rpx;

				view {
					line-height: 34rpx;
				}
			}

			&__one {
				padding: 0 30rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			&__indicators {
				height: 20rpx;

				view {
					width: 10rpx;
					height: 4rpx;
					background-color: rgba(255, 255, 255, 0.2);
				}

				&--active {
					background-color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}

	.not-login-style1,
	.not-login-style2 {
		min-height: 332rpx;
	}

	.not-login-style4 {
		min-height: 424rpx;
	}

	.style1,
	.style2 {
		min-height: 332rpx;
		position: relative;
		background-size: 100% 100% !important;

		.body {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-top: 88rpx;

			.user-box {
				display: flex;
				align-items: flex-start;
				padding-left: 50rpx !important;

				&__avatar {
					margin-right: 36rpx;
				}
			}

			.account-box {
				margin-top: 20px !important;
			}

			.icon-box {
				color: #fff;
				position: absolute;
				top: 30rpx;
				right: 40rpx;
			}
		}
	}

	.style-bg1 {
		background: var(--gradient-primary);
	}

	.style-bg2 {
		// background: url('@/static/layout/basics/user_info_bg1.png') no-repeat;
		background-size: 100% 280rpx;
	}

	// .style2,
	.style3 {
		.body {
			.icon-box {
				padding-right: 50rpx;

				>view {
					padding: 14rpx 24rpx;
					border-radius: 100rpx;
					background: rgba(255, 255, 255, 0.15);
				}
			}
		}
	}

	.style3 {
		overflow: hidden;

		.body {
			background: none;
			padding: 36rpx 30rpx 0 30rpx;

			.icon-box {
				margin-bottom: 22rpx;
			}

			.user-box {
				margin: 0 !important;
				min-height: 180rpx;
				border-radius: 30rpx 30rpx 0px 0px;

				position: relative;
				display: block !important;

				>view {
					&:first-child {
						padding: 32rpx 0 0 28rpx;
					}
				}

				&__avatar {
					position: absolute;
					right: 28rpx;
					top: -20rpx;
				}
			}
		}
	}

	.style-bg3 {
		background: linear-gradient(270deg, #fd5530 0%, #fc7a42 100%);

		.body {
			.user-box {
				background: linear-gradient(46deg, #131b1f 0%, #4d4d4d 100%);
			}
		}
	}

	.style1,
	.style4 {
		position: relative;

		.icon-box {
			position: absolute;
			top: 20rpx;
			right: 40rpx;
		}
	}

	.style-bg4 {
		// background: url('@/static/layout/basics/user_info_bg2.png') no-repeat;
		background-size: 100%;
	}

	.style3,
	.style4 {
		.body {
			.account-box {
				margin-top: 40rpx !important;
			}
		}
	}

	.style4 {
		min-height: 424rpx;
		overflow: hidden;

		.body {
			padding-top: 66rpx;

			.user-box {
				display: flex;
				align-items: center;
				justify-content: center;

				>view {
					flex-direction: column;
				}
			}
		}
	}

	// ::v-deep {
	// 	.xiaoxi-1 .e-badge {
	// 		bottom: 12px;
	// 		    left: 13px;
	// 			    min-width: 15px;
	// 	}
	// 	.xiaoxi-2 .e-badge {
	// 		bottom: 25px;
	// 		    left: 50px;
	// 			    min-width: 15px;
	// 	}
	// }
</style>